<script type="text/javascript">
function onNext(parent, panel) {  
  $(".acc-wizard-todo").click(function(e) {
    e.preventDefault();
  });
  
  hash = "#" + panel.id;
  $(".acc-wizard-sidebar",$(parent))
  .children("li")
  .children("a[href='" + hash + "']")
  .parent("li")
  .removeClass("acc-wizard-todo")
  .addClass("acc-wizard-completed");
}
$(".acc-wizard").accwizard({
  onNext: onNext
});      

</script>

<style type="text/css">
  label {
    display: block;
    margin-top: 10px !important;
    margin-bottom: -37px !important;
}  
</style>
<table>
  <tr>
    <td> 
      <%= link_to 'back', hotels_path, class: "btn btn btn-inverse", remote: true %>    
    </td>
  </tr>
</table> <br/>
<%= form_for(@hotel, :html => {remote: true, id: "form_hotel" }) do |f| %>
<div class="row-fluid">
    <p class="lead well">      
      For more information are available on <a href="https://github.com/sathomas/acc-wizard">GitHub</a>.
    </p>
    </div>
    <div class="row-fluid acc-wizard">
      <div class="span3" style="padding-left: 2em;">
        <p style="margin-bottom: 2em;">
          Follow the steps below to follow the workflow / wizard.
        </p>
        <ol class="acc-wizard-sidebar">
          <li class="acc-wizard-todo"><a href="#prerequisites">Step One</a></li>
          <li class="acc-wizard-todo"><a href="#addwizard">Step Two</a></li>
          <li class="acc-wizard-todo"><a href="#adjusthtml">Step Three</a></li>
          <li class="acc-wizard-todo"><a href="#viewpage">Step Four</a></li>
        </ol>
      </div>
      <div class="span9">
        <div class="accordion" id="accordion-demo">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites">
                First, Start Here
              </a>
            </div>
            <div id="prerequisites" class="accordion-body collapse in demm">
              <div class="accordion-inner">
                <legend id="form-prerequisites" class="nex_st">
                Here are detail location for Step 1..
                  <div class="row-fluid">
                    <div class="span6">
                      <div class="field">
                        <%= f.label :property_type_id %><br />
                        <%= select("hotel", "property_type_id", PropertyType.all.collect {|p| [ p.name_eng, p.id ] }, {:prompt => true}) %>
                        <div id="property_type_id_error" class="error-message"></div>
                      </div>
                      <div class="field">
                        <%= f.label :district_id %><br />
                        <%= select("hotel", "district_id", District.all.collect {|p| [ p.district_name, p.id ] }, {:prompt => true}) %>
                        <div id="district_id_error" class="error-message"></div>
                      </div>
                      <div class="field">
                        <%= f.label :country_id %><br />
                        <%= select("hotel", "country_id", Country.all.collect {|p| [ p.contry_name, p.id ] }, {:prompt => true}) %>
                        <div id="country_id_error" class="error-message"></div>
                      </div>
                    </div>  
                    <div class="span6">
                      <div class="field">
                        <%= f.label :province_id %><br />
                        <%= select("hotel", "province_id", Province.all.collect {|p| [ p.province_name, p.id ] }, {:prompt => true}) %>
                        <div id="province_id_error" class="error-message"></div>
                      </div>
                      <div class="field">
                        <%= f.label :area_id %><br />
                        <%= select("hotel", "area_id", Area.all.collect {|p| [ p.area, p.id ] }, {:prompt => true}) %>
                        <div id="area_id_error" class="error-message"></div>
                      </div>
                    </div>  
                  </div>      
                </legend>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#prerequisites -->
          </div> <!-- /.accordion-group -->
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard">
                Then, Follow these Steps
              </a>
            </div>
            <div id="addwizard" class="accordion-body collapse in demm">
              <div class="accordion-inner">
                <legend id="form-addwizard" class="nex_st">
                Here are details for Step 2..
                <div class="row-fluid">
                  <div class="span6">
                    <div class="field">
                      <%= f.label :hotel_name %><br />
                      <%= f.text_field :hotel_name %>
                      <div id="hotel_name_error" class="error-message"></div>
                    </div>
                    <div class="field">
                    <%= f.label :postal_code %><br />
                    <%= f.text_field :postal_code %>
                    <div id="postal_code_error" class="error-message"></div>
                  </div>
                  </div>
                  <div class="span6">
                    <div class="field">
                      <%= f.label :address %><br />
                      <%= f.text_field :address %>
                      <div id="address_error" class="error-message"></div>
                    </div>
                    <div class="field">
                      <%= f.label :hotel_rooms %><br />
                      <%= f.number_field :hotel_rooms %>
                      <div id="hotel_rooms_error" class="error-message"></div>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="span12">
                    <div id="ck_editors" class="field">
                      <h4>Bahasa Indonesia Description</h4>
                      <%= f.cktext_area :description_idn, style: "width:80%", :ckeditor => {:language => "en", :toolbar => "full"} %>
                      <div id="description_idn_error" class="error-message"></div>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="span12">
                    <div id="ck_editors" class="field">
                      <h4>English Description</h4>
                      <%= f.cktext_area :description_eng, style: "width:80%", :ckeditor => {:language => "en", :toolbar => "mini"} %>
                      <div id="description_eng_error" class="error-message"></div>
                    </div>
                  </div>              
                </div>
                </legend>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#addwizard -->
          </div> <!-- /.accordion-group -->

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml">
                You're Almost Done
              </a>
            </div>
            <div id="adjusthtml" class="accordion-body collapse in demm">
              <div class="accordion-inner" class="nex_st">
                <legend id="form-adjusthtml">
                Here are details for Step 3..
                <div class="field">
                  <%= f.label :check_in_time %><br />
                  <%= f.time_select :check_in_time, class: "span1" %>
                  <div id="check_in_time_error" class="error-message"></div>
                </div>
                <div class="field">
                  <%= f.label :check_out_time %><br />
                  <%= f.time_select :check_out_time %>
                  <div id="check_out_time_error" class="error-message"></div>
                </div>
                <div class="field">
                  <%= f.label :stars %><br />
                  <%= f.number_field :stars %>
                  <div id="stars_error" class="error-message"></div>
                </div>
                <div class="field">
                  <%= f.label :primary_picture %><br />
                  <%= f.file_field :primary_picture %>
                  <div id="primary_picture_error" class="error-message"></div>
                </div>
                <div class="row-fluid alert">
                  <div class="span4">
                    <div class="field">
                      <label class="checkbox">
                        <%= f.check_box :is_published %> <%= f.label :is_published %>
                      </label>
                    </div> 
                  </div>
                  <div class="span4">
                    <div class="field">
                      <label class="checkbox">
                        <%= f.check_box :is_on_promoted %>
                        <%= f.label :is_on_promoted %>
                      </label>
                    </div>  
                  </div>
                  <div class="span4">
                    <div class="field">
                      <label class="checkbox">
                        <%= f.check_box :is_recomended %>
                        <%= f.label :is_recomended %>
                      </label>
                    </div> 
                  </div>
                </div>
                </legend>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#adjusthtml -->
          </div> <!-- /.accordion-group -->

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage">
                The Last Step
              </a>
            </div>
            <div id="viewpage" class="accordion-body collapse in demm">
              <div class="accordion-inner" class="nex_st">
                <legend id="form-viewpage">
                  <p>
                   Here are details for Step 4. Done!
                   <div class="actions">
                    <%= f.submit "Let's Save", class: "btn btn-large btn-primary" %>
                  </div>
                  </p>
                </legend>
              </div> <!--/.accordion-inner -->
            </div> <!-- /#viewpage -->
          </div> <!-- /.accordion-group -->
          
        </div>
        
      </div>
</div>
<% end %>
